<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getUserList, deleteUser } from '@/api/rsgl'
import Info from './info.vue'
import Details from './details.vue'
// import { Box } from '@element-plus/icons-vue/dist/types'

// 表单状态
const filterState = ref(true)
const tableData = ref([])
// 用户编辑
const infoRef = ref()
// 用户详情
const detailsRef = ref()
const onDetails = (row) => {
  detailsRef.value.state = true
  if (row) {
    detailsRef.value.formData = row
  }
}

const formData = reactive({
  pageNum: 1,
  pageSize: 10,
  empName: '',
  workCode: ''
})

function getUserListData() {
  getUserList(formData).then((res) => {
    tableData.value = res.data
  })
}
onMounted(() => {
  getUserListData()
})

//搜索，重置
const search = () => {
  getUserListData()
}
const resetSearch = () => {
  formData.pageNum = 1
  formData.empName = ''
  formData.workCode = ''
  getUserListData()
}

// 处理分页逻辑
// 分页
const onSizeChange = (val) => {
  formData.pageNum = 1
  formData.pageSize = val
  getUserListData()
}
const onCurrentChange = (val) => {
  formData.pageNum = val
  getUserListData()
}

// 批量删除
const ids = ref([])
function handleSelectionChange(val) {
  ids.value = []
  val.forEach((item) => {
    ids.value.push(item.id)
  })
}

const deleteBatch = () => {
  ElMessageBox.confirm('确定批量删除数据吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      //请求删除接口
      let r = await deleteUser(ids.value)
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '批量删除成功' })
        getUserListData()
      } else {
        ElMessage({ type: 'error', message: '批量删除失败' })
      }
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '批量删除取消' })
    })
}

// 用户删除
const onDelete = (row) => {
  ElMessageBox.confirm('确定删除该条数据吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      //请求删除接口
      let r = await deleteUser([row.id])
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '删除成功' })
        getUserListData()
      } else {
        ElMessage({ type: 'error', message: '删除失败' })
      }
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '删除取消' })
    })
}

const onUserInfo = (row) => {
  infoRef.value.state = true
  if (row) {
    infoRef.value.formData = row
  }
}
</script>
<template>
  <Box>
    <!-- 逻辑层 -->
    <Info ref="infoRef" @flush="getUserListData" />
    <Details ref="detailsRef" @flush="getUserListData" />
    <!-- <AssignRole ref="assignRoleRef" /> -->
    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true" :model="formData">
        <el-form-item label="名称">
          <el-input placeholder="输入员工姓名查询" v-model="formData.empName" />
        </el-form-item>
        <el-form-item label="员工编号">
          <el-input
            placeholder="输入员工编号查询"
            v-model="formData.workCode"
          />
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="formData.state" style="width: 120px">
            <el-option label="全部" value="0"></el-option>
            <el-option label="正式员工" value="1"></el-option>
            <el-option label="试用期" value="2"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="search">
            <span class="iconfont icon-sousuo"></span>搜索
          </el-button>
          <el-button type="default" @click="resetSearch"> 重置 </el-button>
          <!-- <el-button type="primary" link @click="isExpand = !isExpand">
            {{ isExpand ? '收起' : '展开' }}
            <el-icon>
              <ArrowUp v-if="isExpand" />
              <ArrowDown v-else />
            </el-icon>
          </el-button> -->
        </el-form-item>
      </el-form>
    </template>
    <!-- 按钮组 -->
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="onUserInfo(null)">
          <span class="iconfont icon-jiahao"></span>新增
        </el-button>
        <el-button type="danger" :disabled="!ids.length" @click="deleteBatch">
          <span class="iconfont icon-shanchu"></span>批量删除
        </el-button>
        <!-- <el-button type="info">
          <span class="iconfont icon-shangchuan"></span>导入
        </el-button>

        <el-button type="warning">
          <span class="iconfont icon-xiazai-"></span>导出
        </el-button> -->
      </el-col>
      <!-- <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle  @click="getUserListData">
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col> -->
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="tableData.rows"
      :border="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        align="center"
        fixed="left"
      ></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="70"
      ></el-table-column>
      <el-table-column
        label="姓名"
        prop="empName"
        align="center"
      ></el-table-column>
      <!-- <el-table-column label="用户名" prop="uname" align="center" width="200"></el-table-column> -->
      <el-table-column
        label="员工编号"
        prop="workCode"
        align="center"
      ></el-table-column>
      <el-table-column
        label="部门"
        prop="deptName"
        align="center"
      ></el-table-column>
      <!-- <el-table-column label="岗位" prop="" align="center"></el-table-column>
      <el-table-column label="职务" prop="" align="center"></el-table-column> -->
      <el-table-column prop="gender" label="性别" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.gender === 1" type="warning">男</el-tag>
          <el-tag v-if="scope.row.gender === 2" type="info">女</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="入职时间"
        prop="entryTime"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template #default="scoped">
          <el-button
            type="primary"
            @click="onDetails(scoped.row)"
            link
            size="small"
          >
            <span></span>详情
          </el-button>
          <el-button
            type="primary"
            link
            size="small"
            @click="onUserInfo(scoped.row)"
          >
            <span class="iconfont icon-bianji"></span>修改
          </el-button>
          <el-button
            type="primary"
            link
            size="small"
            @click="onDelete(scoped.row)"
          >
            <span></span>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="formData.pageNum"
      v-model:page-size="formData.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </Box>
</template>
